<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<head>
    <meta charset="UTF-8">
    <title>评论</title>
    <script src="${pageContext.request.contextPath}/js/jQuery/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/head.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/comment.css">
</head>
<body>
<!--========================头部===================================================-->
<div class="top">
    <input type="hidden" value="${product.productId}" class="productid">
    <input type="hidden" value="${loginCustomer.customerId}" class="customerid">
    <div class="top-log">
        <div class="logo">
            <a href="/fresh/index.jsp"><img src="${pageContext.request.contextPath}/images/xianyu.jpg" width="90" height="40"></a>
        </div>
    </div>
    <div class="top-dingwei">
        <div class="top-dingwei-main">
            <ul>
                <li class="top-dingwei-img"><img src="${pageContext.request.contextPath}/images/dingwei.png"></li>
                <li class="top-dingwei-city"><a href="#">深圳<p class="top-dingwei-jiantou"></p></a></li>
            </ul>
        </div>
    </div>
    <!--============================搜索=====================================-->
    <div class="search">
        <div class="layui-form">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入查询关键字" autocomplete="off" class="layui-input input-text">
            <button class="submit-button"><i class="submitButton"></i> </button>
        </div>
    </div>
    <!--=======================购物车==========================-->
    <div class="cart">
        <dl>
            <dt class="shopping-btn">
                <a href="/fresh/cart/cart.jsp">
                    <b class="totlePrice">￥2020.00</b>
                </a>
            </dt>
        </dl>
    </div>

    <!--=======================我的====================================-->
    <div class="top-menu">
        <div class="login">
            <c:choose>
                <c:when test="${empty loginCustomer}">
                    <p>
                        <a href="/fresh/customer/login.jsp">登录/</a>
                        <a href="/fresh/customer/regist.jsp">注册</a>
                    </p>
                </c:when>

                <c:otherwise>
                    <p>
                        <a href="">${loginCustomer.customerTelno}/</a>
                        <a href="/fresh/customer/login.jsp">退出</a>
                    </p>
                </c:otherwise>
            </c:choose>

        </div>
        <div class="user">
            <ul>
                <li class=" tle">
                    <a class="geren" href=""><img src="${pageContext.request.contextPath}/images/geren-logo.png"></a>
                    <a href="/fresh/customer/center.jsp">我的咸鱼</a>
                </li>
                <%--<li class="e1">--%>
                    <%--<a class="order" href=""><img src="${pageContext.request.contextPath}/images/order-logo.png"></a>--%>
                    <%--<a href="/fresh/customer/center.jsp">我的订单</a>--%>
                <%--</li>--%>
                <%--<li class="e2">--%>
                    <%--<a class="coupon" href=""><img src="${pageContext.request.contextPath}/images/coupon.png"></a>--%>
                    <%--<a href="/fresh/product/attention.jsp">我的关注</a>--%>
                <%--</li>--%>
                <%--<li class="last">--%>
                    <%--<a class="exit" href=""><img src="${pageContext.request.contextPath}/images/exit.png"></a>--%>
                    <%--<a href="/fresh/customer/login.jsp">退出账户</a>--%>
                <%--</li>--%>
            </ul>
        </div>
    </div>
</div>




<!--==================================中间部分====================================-->
<input type="hidden" value="${product.productId}" class="productid">
<input type="hidden" value="${loginCustomer.customerId}" class="customerid">
<div class="pro-detail">

    <div class="crumbs">
        <a href="">首页 ></a>
        <a href="">新鲜水果 ></a>
        <a href="">${product.productName}</a>
    </div>

    <div class="pic-preview">
        <img src="${pageContext.request.contextPath}/images/${productImages.productImagesImage}">


    </div>

    <div class="product-info">
        <div class="summary-name">
            <h1>${product.productName}</h1>
        </div>

        <div class="price-clearfix">
            <div class="pro-price">
                <span class="tt">价格：</span>
                <span>
                    <em>￥</em>
                    <span>${product.productPrice}</span>
                </span>
            </div>
            <div class="pro-m">
                <span class="ff">更多商品优惠，尽在咸鱼鲜生</span>
                <img src="${pageContext.request.contextPath}/images/shouji.png">
                <span class="ss">手机下单立即购买</span>
                <span class="sm">立即扫码</span>
            </div>
            <div class="erweima">
                <img src="${pageContext.request.contextPath}/images/erweima.png">
            </div>
            <div class="pro-review">
                <p>总体满意度</p>
                <span class="fen">5.0</span>
                <span>分</span>
                <p>(评论数100)</p>
            </div>

        </div>
    </div>

    <div class="other-clearfix">
        <div class="left">
            <div class="choose-clearfix">
                <div class="ll">
                    <span>规格：</span>
                </div>
                <div class="dd">
                    <div class="top">
                        <span>￥</span>
                        <span>${product.productPrice}</span>
                    </div>
                    <div class="bot">
                        <span>${productSpec.specWeigth}</span>
                    </div>

                </div>

            </div>

            <div class="service">
                <img src="${pageContext.request.contextPath}/images/1.png">
                <span>不支持7天无理由退货</span>
            </div>

            <div class="amount">
                <div class="dt">
                    <span>数量：</span>
                </div>
                <div class="gt">
                    <div class="t count">
                        1
                    </div>
                    <div class="kt">
                        <div class="tp addcount">
                            +
                        </div>
                        <div class="btm reduce">
                            -
                        </div>
                    </div>
                </div>
                <div class="add-car" onclick="add2cart">
                    <img src="${pageContext.request.contextPath}/images/addcar.png">
                    <a href="javascript:;" class="add-product">加入购物车</a>
                </div>

            </div>

            <div class="right">
                <table width="100%" cellspacing="0" cellpadding="0" border="0" class="zx">
                    <tbody>
                    <tr>
                        <th>原产地：</th>
                        <td>${productSpec.specPlace}</td>
                    </tr>
                    <tr>
                        <th>商品编号：</th>
                        <td>${product.productNum}</td>
                    </tr>
                    <tr>
                        <th>品牌：</th>
                        <td>咸鱼</td>
                    </tr>
                    <tr>
                        <th>发货地：</th>
                        <td>江苏苏州</td>
                    </tr>
                    </tbody>

                </table>
            </div>

        </div>


    </div>







</div>
<div class="mainer">
    <div class="detail-tab">
        <ul class="detail-ul">

            <li class="detail-li">
                <a href="">用户评论</a>
                <span>100</span>
            </li>
        </ul>
    </div>
   <div class="detail-item">
       <div class="comment-info">
           <div class="score">
               <span>总体满意度</span>
               <b>
                   <span class="oo">5.0</span>
                   <span>分</span>
               </b>
               <span>(共有<strong id="get-count"></strong>人评论)</span>

           </div>
           <div class="percent">
               <ul class="slip">
                   <li>
                       <b>好评</b>
                       <span w="30%" style="width: 30%;"></span>
                       <i>30%</i>
                   </li>
                   <li>
                       <b>中评</b>
                       <span w="70%" style="width: 70%;"></span>
                       <i>70%</i>
                   </li>
                   <li>
                       <b>差评</b>
                       <span w="0%" style="width: 0%;"></span>
                       <i>0%</i>
                   </li>
               </ul>
           </div>
           <div class="comment-btn">
               <div class="comment">
                   <a href="">我要评论</a>
                  <p>只有买过商品的人才可以评论</p>
               </div>
           </div>

       </div>
       <div class="comment-list">
           <div class="comment-tab">
               <ul>
                   <li class="L-1">
                       <span>全部评论</span>
                       <span>10</span>
                   </li>


               </ul>

           </div>
           <div class="comment-con">
               <ul class="comment-ul">
                  <%-- <li>

                       <div class="content-comment">
                           <div class="heading">
                               <div class="stars-pg">
<!--                                   <span style="width: 60%"></span>-->
                               </div>
                               <div class="pingfen">
                                   <span class="c-star">3</span>
                                   <span>分</span>
                               </div>

                               <div class="date">
                                   <span class="c-time">2020年4月1日 16:28:53</span>
                                  &lt;%&ndash; <span>16:28:53</span>&ndash;%&gt;
                               </div>

                           </div>
                           <div class="reply">
                               <span class="c-content">对商品非常满意哦</span>

                           </div>
                       </div>
                   </li>--%>
                   <%--<li>
                       <!--                       <div class="pic">-->
                       <!--                           <img src="images/xing.png">-->
                       <!--                       </div>-->

                       <div class="content-comment">
                           <div class="heading">
                               <div class="stars-pg">
                                   <span style="width: 60%"></span>
                               </div>
                               <div class="pingfen">
                                   <span>3</span>
                                   <span>分</span>
                               </div>
                               <div class="zhiliang">
                                   <span>商品质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="fuwu">
                                   <span>服务质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="date">
                                   <span>2020年4月1日</span>
                                   <span>16:28:53</span>
                               </div>

                           </div>
                           <div class="reply">
                               <span>对商品非常满意哦</span>

                           </div>

                       </div>

                   </li>
                   <li>
                       <!--                       <div class="pic">-->
                       <!--                           <img src="images/xing.png">-->
                       <!--                       </div>-->

                       <div class="content-comment">
                           <div class="heading">
                               <div class="stars-pg">
                                   <span style="width: 60%"></span>
                               </div>
                               <div class="pingfen">
                                   <span>3</span>
                                   <span>分</span>
                               </div>
                               <div class="zhiliang">
                                   <span>商品质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="fuwu">
                                   <span>服务质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="date">
                                   <span>2020年4月1日</span>
                                   <span>16:28:53</span>
                               </div>

                           </div>
                           <div class="reply">
                               <span>对商品非常满意哦</span>

                           </div>

                       </div>

                   </li>
                   <li>
                       <!--                       <div class="pic">-->
                       <!--                           <img src="images/xing.png">-->
                       <!--                       </div>-->

                       <div class="content-comment">
                           <div class="heading">
                               <div class="stars-pg">
                                   <span style="width: 60%"></span>
                               </div>
                               <div class="pingfen">
                                   <span>3</span>
                                   <span>分</span>
                               </div>
                               <div class="zhiliang">
                                   <span>商品质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="fuwu">
                                   <span>服务质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="date">
                                   <span>2020年4月1日</span>
                                   <span>16:28:53</span>
                               </div>

                           </div>
                           <div class="reply">
                               <span>对商品非常满意哦</span>

                           </div>

                       </div>

                   </li>
                   <li>
                       <!--                       <div class="pic">-->
                       <!--                           <img src="images/xing.png">-->
                       <!--                       </div>-->

                       <div class="content-comment">
                           <div class="heading">
                               <div class="stars-pg">
                                   <span style="width: 60%"></span>
                               </div>
                               <div class="pingfen">
                                   <span>3</span>
                                   <span>分</span>
                               </div>
                               <div class="zhiliang">
                                   <span>商品质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="fuwu">
                                   <span>服务质量：</span>
                                   <span>好</span>
                               </div>
                               <div class="date">
                                   <span>2020年4月1日</span>
                                   <span>16:28:53</span>
                               </div>

                           </div>
                           <div class="reply">
                               <span>对商品非常满意哦</span>

                           </div>

                       </div>

                   </li>--%>

                   </ul>


           </div>

       </div>
   </div>
</div>
<div class="footer">
    <div class="wrap">
        <div class="s1">
            <img src="${pageContext.request.contextPath}/images/quanqiu.png">
            <b>全球精选</b>
            <span>一站式生鲜购物方案</span>
        </div>
        <div class="s2">
            <img src="${pageContext.request.contextPath}/images/cangku.png">
            <b>多仓直发</b>
            <span>次日达配送服务</span>
        </div>
        <div class="s3">
            <img src="${pageContext.request.contextPath}/images/jingxuan.png">
            <b>品质严选</b>
            <span>精选正宗品质好食材</span>
        </div>
        <div class="s4">
            <img src="${pageContext.request.contextPath}/images/gouwu.png">
            <b>天天低价</b>
            <span>会员专属优惠购不停</span>
        </div>


    </div>

</div>
<script src="${pageContext.request.contextPath}/js/head.js"></script>
<script src="${pageContext.request.contextPath}/js/product/comment.js"></script>
</body>
</html>